<template>
  <el-dialog
      title="一键测试"
      v-el-drag-dialog
      v-if="showDom"
      :visible.sync="visible"
      width="720px"
      center
      :show-close="false"
      @closed="closed">
    <el-table
        class="yt-table"
        :data="lists"
        border
        max-height="300px"
        style="width: 100%"
        :span-method="arraySpanMethod">
      <el-table-column prop="functionName" label="函数" width="100px" align="center"></el-table-column>
      <el-table-column prop="inParamName" label="参数名称" width="100px" align="center"></el-table-column>
      <el-table-column prop="inParamType" label="参数类型" width="200px" align="center"></el-table-column>
      <el-table-column label="参数值" min-width="100px" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.value" size="mini" placeholder="请输入参数值"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div class="progress-box" v-if="testPercentage">
      <el-progress
          :text-inside="true"
          :show-text="false"
          :stroke-width="8"
          :percentage="testPercentage"
          status="success">
      </el-progress>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="" @click="cancelTap">取 消</el-button>
      <el-button size="small" type="primary" @click="confirmTap" :loading="btnloading">检 测</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  post_loadDll,
  put_libraryAdd,
  get_getFunctionByPluginsId
} from "@/apis/assembly/assembly";

export default {
  name: 'TestDailog',
  props: {},
  data() {
    return {
      appid: '',
      showDom: false,
      visible: false,
      lists: [],
      testPercentage: 0,
      timer: null,
      btnloading: false
    };
  },
  computed: {},
  mounted() {

  },
  created() {

  },
  methods: {
    show(appid) {
      this.testPercentage = 0
      this.showDom = true
      this.visible = true
      this.appid = appid
      this.getFunList(appid)
    },
    hide() {
      this.visible = false
    },
    closed() {
      this.showDom = false
    },
    // 获取组件函数列表
    getFunList(appid) {
      get_getFunctionByPluginsId({
        pluginsId: appid,
      }).then((res) => {
        let {data, status} = res.data;
        let arr = []
        data.forEach((item, index) => {
          let items = item.paramInputClass.split(',')
          let outItems = item.paramOutputClass.split(' ')
          items.forEach((li, i) => {
            arr.push({
              addTime: item.addTime,
              editTime: item.editTime,
              functionName: item.functionName,
              span: i === 0 ? [items.length, 1] : [0, 0],
              id: item.id + '-' + i,
              keyId: item.id,
              inParamType: li.split(' ')[0] || '--',
              inParamName: li.split(' ')[1] || '--',
              outParamType: outItems[0] || '--',
              outParamName: outItems[1] || '--',
              paramInputClass: "String ss,Short ss",
              paramOutputClass: "Integer ss",
              value: '',
              pid: item.pid,
              remarks: item.remarks,
              userName: item.userName
            })
          })
        })
        this.lists = arr
      });
    },

    // 合并单元格
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return row.span;
      }
    },
    // 检测
    confirmTap() {
      let datas = []
      let res = {}
      this.lists.map(item => {
        // 可以先输出一下想要的结果
        res[item.keyId] = res[item.keyId] || []; // 给className后加一个[]中括号
        res[item.keyId].push({
          id: item.keyId,
          value: item.value
        }); // 将所有的item列放入到对应的className中
      })

      for (let i in res) {
        datas.push({
          id: i,
          paramInputClass: res[i].map(item => {
            return item.value
          }).join(',')
        })
      }

      this.timer = setInterval(() => {
        if (this.testPercentage >= 80) {
          clearInterval(this.timer)
        } else {
          this.testPercentage += Math.floor(Math.random() * 10)
        }
      }, 50)
      this.btnloading = true
      post_loadDll({id: this.appid, data: datas}).then((res) => {
        let {code, msg, data} = res.data;
        if (code === 0) {
          clearInterval(this.timer)
          this.testPercentage = 100

          let resultDatas = data.map(item => {
            let liItem = this.lists.find(li => {
              return item.id == li.keyId
            })
            return {
              name: liItem.functionName,
              value: item.value,
              code: 0
            }
          });
          setTimeout(() => {
            this.hide()
            this.$emit('testResult', resultDatas)
          }, 300)
        } else {

        }
      }).catch((err => {
        this.$message.error('检测失败！')
      })).finally(() => {
        this.btnloading = false
      });
    },
    // 取消
    cancelTap() {
      this.hide()
      this.$router.push({name: 'CompList'})
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
};
</script>
<style lang="less" scoped>
  @red: #ff5757;
  @yellow: yellow;
  @orange: #f7903d;
  @blue: #2aef8a;
  @gray: gray;
  .form-box-group {
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
  }

  .form-box-item {
    padding: 15px 50px 15px 15px;
    border-bottom: solid 1px #ffffff;

    &:last-child {
      border-bottom: none;
    }
  }

  .progress-box {
    padding-top: 15px;
  }

  /deep/ .el-table {
    .text-color-red {
      .cell {
        color: @red !important;
      }
    }

    .text-color-orange {
      .cell {
        color: @orange !important;
      }
    }

    .text-color-yellow {
      .cell {
        color: @yellow !important;
      }
    }

    .text-color-blue {
      .cell {
        color: @blue !important;
      }
    }
  }
</style>